import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import { of } from 'rxjs/observable/of';
import { catchError, map, tap } from 'rxjs/operators';

import { Task } from '../task/task.model';

import { ModalDirective } from 'ngx-bootstrap/modal';

import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-role',
  templateUrl: './role.component.html',
  styleUrls: ['./role.component.css',
        '../task/task.component.css',
        '../app.component.css']
})
export class RoleComponent implements OnInit {
    private headers = new HttpHeaders({'Content-Type': 'application/x-www-form-urlencoded'});
    url = 'http://edu.xk.com/xkapi'; 
    addOrEdit:string = 'add';

    data = [];
    array = [];

    size: number = 10;    
    index: number;     //要先声明 

    searchCode:string = '';
    searchTeacher:string = '';
    searchContact:string = '';
    id: number = 0;

    name: string  = '';
    nickname: string  = '';
    pass: string  = '';
    passAgain: string  = '';
    roleId = 1;

    deleteId : number = 0;
    isEmpty:boolean = false;
    roles = [
        {
          id: 1,
          name: '普通管理员'
        },
        {
          id: 0,
          name: '超级管理员'
        }
    ]


    constructor(private http: HttpClient){ }

    ngOnInit() {
      this.getList(1,10)  //要this

    }

    getList(pagenumber, pagesize){

        
        return this.http.get(`${this.url}/admin/findAll`).subscribe(
          result => {
              if(result) {
                  if (result['status'] == 200) {
                      this.array = result['data'];
                  } else {
                      console.log(result['desc']);
                  }
              }
          }
      );
    }

    //添加和编辑 提交按钮
    onSubmit(id, nickname, name, pass, role, addModal):void {
        let reqUrl = this.addOrEdit === 'add' ? `${this.url}/admin/add` : `${this.url}/admin/update`;
        if (!(name && nickname && pass)) {
            this.isEmpty= true;
            return;
        }
        this.isEmpty= false;
        this.http.get(`${reqUrl}?id=${id}&name=${name}&nickname=${nickname}&password=${pass}&role=${role}`).subscribe(
          result => {
            if(result) {
              if (result['status'] == 200) {
                  this.getList(1, 10); //要this
                  addModal.hide();
              } else {
                  console.log(result['desc']);
                  addModal.hide();
              }
            }
          }
        );
    }
    ngChangedFn():void {
        this.isEmpty = false;
    }
    //添加
    addNew(addModal) {
        addModal.show();

        this.addOrEdit = 'add';
        this.id = 0;
        this.name = '';
        this.nickname = '';

        this.pass = '';
        this.passAgain = '';
        this.roleId = 1;
    }
    // 编辑 按钮
    edit(item, addModal) {  
        console.log('item:');
        console.log(item);

        addModal.show();
        
        this.addOrEdit = 'edit';
        this.id = item.id;
        this.name = item.name;
        this.nickname = item.nickname;
        this.pass = item.password;
        this.passAgain = item.password;
        this.roleId = item.role;
    }
    //删除按钮
    delete(item, deleteModal){  
        deleteModal.show();
        console.log('delete');
        this.deleteId= item.id;
        
    }
    //删除 确认
    deleteConfirm(item,deleteModal) {  
        console.log('item:');
        console.log(item);
        return this.http.get(`${this.url}/admin/delete?id=${this.deleteId}`).subscribe(
          result => {
              if(result) {
                this.getList(1, 10)  //要this
                deleteModal.hide();
              } else {
                  console.log(result['desc']);
              }
          }
      );
    }
}
